<form [formGroup]="form">
  <ng-container formGroupName="BasicConstraints">
    <ix-checkbox
      formControlName="enabled"
      [label]="'Basic Constraints' | translate"
      [tooltip]="helptext.add.basicConstraints.enabled.tooltip | translate"
    ></ix-checkbox>

    @if (hasExtension('BasicConstraints')) {
      <ix-input
        formControlName="path_length"
        type="number"
        [label]="'Path Length' | translate"
        [tooltip]="helptext.add.basicConstraints.pathLength.tooltip | translate"
      ></ix-input>
      <ix-select
        formControlName="BasicConstraints"
        [label]="'Basic Constraints Config' | translate"
        [tooltip]="helptext.add.basicConstraints.config.tooltip | translate"
        [options]="basicConstraintsOptions$ | translateOptions"
        [multiple]="true"
      ></ix-select>
    }
  </ng-container>

  <ng-container formGroupName="ExtendedKeyUsage">
    <ix-checkbox
      formControlName="enabled"
      [label]="'Extended Key Usage' | translate"
      [tooltip]="helptext.add.extendedKeyUsage.enabled.tooltip | translate"
    ></ix-checkbox>

    @if (hasExtension('ExtendedKeyUsage')) {
      <ix-select
        formControlName="usages"
        [label]="'Usages' | translate"
        [multiple]="true"
        [required]="true"
        [options]="extendedKeyUsageOptions$"
        [tooltip]="helptext.add.extendedKeyUsage.usages.tooltip | translate"
      ></ix-select>
      <ix-checkbox
        formControlName="extension_critical"
        [label]="'Critical Extension' | translate"
        [tooltip]="helptext.add.extendedKeyUsage.extensionCritical.tooltip | translate"
      ></ix-checkbox>
    }
  </ng-container>

  <ng-container formGroupName="KeyUsage">
    <ix-checkbox
      formControlName="enabled"
      [label]="'Key Usage' | translate"
      [tooltip]="helptext.add.keyUsage.enabled.tooltip | translate"
    ></ix-checkbox>

    @if (hasExtension('KeyUsage')) {
      <ix-select
        formControlName="KeyUsage"
        [label]="'Key Usage Config' | translate"
        [multiple]="true"
        [options]="keyUsageOptions$ | translateOptions"
        [tooltip]="helptext.add.keyUsage.config.tooltip | translate"
      ></ix-select>
    }
  </ng-container>

  <ix-form-actions>
    <button
      mat-button
      matStepperPrevious
      ixTest="back"
    >{{ 'Back' | translate }}</button>
    <button
      mat-button
      matStepperNext
      color="primary"
      ixTest="next"
      [disabled]="form.invalid"
    >{{ 'Next' | translate }}</button>
  </ix-form-actions>
</form>
